﻿<html>
<head>
		<title>Demo display info when mouse move on a pic</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <style type="text/css">
		.tiptext {
                background:#ccc;
                border: 1px #333 solid;
                padding:5px;
                width:100px;
            }
            .description {
              display:none;
                position:absolute;
                border:1px solid #000;
                width:400px;
                height:400px;
                z-index:2000px;
            }
            .pname 
            {
                color:Blue;
            } 
             .pprice 
            {
                color:#e93008;
            } 
		</style>        <style type="text/css">

#dhtmltooltip{
position: absolute;
width: 150px;
border: 1px solid #f4e6bf;
padding: 2px;
padding-top:8px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
min-height:50;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

</style>

</head>
	<body leftmargin="0" topmargin="0">

    <div id="dhtmltooltip"></div>

<script type="text/javascript">

    /***********************************************
    * Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var offsetxpoint = -60 //Customize x offset of tooltip
    var offsetypoint = 20 //Customize y offset of tooltip
    var ie = document.all
    var ns6 = document.getElementById && !document.all
    var enabletip = false
    if (ie || ns6)
        var tipobj = document.all ? document.all["dhtmltooltip"] : document.getElementById ? document.getElementById("dhtmltooltip") : ""

    function ietruebody() {
        return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
    }

    function ddrivetip(thetext, thecolor, thewidth) {
        if (ns6 || ie) {
            if (typeof thewidth != "undefined") tipobj.style.width = thewidth + "px"
            if (typeof thecolor != "undefined" && thecolor != "") tipobj.style.backgroundColor = thecolor
            tipobj.innerHTML = thetext
            enabletip = true
            return false
        }
    }

    function positiontip(e) {
        if (enabletip) {
            var curX = (ns6) ? e.pageX : event.clientX + ietruebody().scrollLeft;
            var curY = (ns6) ? e.pageY : event.clientY + ietruebody().scrollTop;
            //Find out how close the mouse is to the corner of the window
            var rightedge = ie && !window.opera ? ietruebody().clientWidth - event.clientX - offsetxpoint : window.innerWidth - e.clientX - offsetxpoint - 20
            var bottomedge = ie && !window.opera ? ietruebody().clientHeight - event.clientY - offsetypoint : window.innerHeight - e.clientY - offsetypoint - 20

            var leftedge = (offsetxpoint < 0) ? offsetxpoint * (-1) : -1000

            //if the horizontal distance isn't enough to accomodate the width of the context menu
            if (rightedge < tipobj.offsetWidth)
            //move the horizontal position of the menu to the left by it's width
                tipobj.style.left = ie ? ietruebody().scrollLeft + event.clientX - tipobj.offsetWidth + "px" : window.pageXOffset + e.clientX - tipobj.offsetWidth + "px"
            else if (curX < leftedge)
                tipobj.style.left = "5px"
            else
            //position the horizontal position of the menu where the mouse is positioned
                tipobj.style.left = curX + offsetxpoint + "px"

            //same concept with the vertical position
            if (bottomedge < tipobj.offsetHeight)
                tipobj.style.top = ie ? ietruebody().scrollTop + event.clientY - tipobj.offsetHeight - offsetypoint + "px" : window.pageYOffset + e.clientY - tipobj.offsetHeight - offsetypoint + "px"
            else
                tipobj.style.top = curY + offsetypoint + "px"
            tipobj.style.visibility = "visible"
        }
    }

    function hideddrivetip() {
        if (ns6 || ie) {
            enabletip = false
            tipobj.style.visibility = "hidden"
            tipobj.style.left = "-1000px"
            tipobj.style.backgroundColor = ''
            tipobj.style.width = ''
        }
    }

    document.onmousemove = positiontip

</script>
<center><span style="text-align:center; font-size:20pt">Split one picture to three products - demo</span></center>

		<img border="0" src="http://www.net-a-porter.com/alfresco/nap/webAssets/magazine/issues/issue_262/final_touch/common/page_1/productsBG.jpg?v=0.3" usemap="#map">
        
        <map name="map">
            <area  shape="circle" coords="587, 99, 86" title="" alt="" 
            onmouseover="ddrivetip('<b>Name:</b> <span class=pname> Product 1 </span> <br/><b>Price:</b> <span class=pprice>$30 </span>' , '#EFEFEF')";
            onmouseout="hideddrivetip()"  href="#chitietsp1url"/>

            <area  shape="circle" coords="777, 156, 90" title="" alt="" 
             onmouseover="ddrivetip('<b>Name:</b> <span class=pname> Product 1 </span> <br/><b>Price:</b> <span class=pprice>$30 </span>' , '#EFEFEF')";
            onmouseout="hideddrivetip()"  href="#chitietsp1url"/>

            <area  shape="circle" coords="437, 317, 82" title="" alt="" 
            onMouseover="ddrivetip('<b>Name:</b> <span class=pname> Product 2 </span> <br/><b>Price:</b> <span class=pprice>$40 </span>' , '#EFEFEF')";
            onMouseout="hideddrivetip()"  href="#chitietsp2url"/>

            <area  shape="circle" coords="634, 270, 77" title="" alt="" 
            onMouseover="ddrivetip('<b>Name:</b> <span class=pname> Product 2 </span> <br/><b>Price:</b> <span class=pprice>$40 </span>' , '#EFEFEF')";
            onMouseout="hideddrivetip()"  href="#chitietsp2url"/>

            <area  shape="circle" coords="575, 437, 76" title="" alt="" 
            onMouseover="ddrivetip('<b>Name:</b> <span class=pname> Product 3 </span> <br/><b>Price:</b> <span class=pprice>$50 </span>' , '#EFEFEF')";
            onMouseout="hideddrivetip()"  href="#chitietsp3url"/>

            <area  shape="circle" coords="769, 501, 81" title="" alt="" 
            onMouseover="ddrivetip('<b>Name:</b> <span class=pname> Product 3 </span> <br/><b>Price:</b> <span class=pprice>$50 </span>' , '#EFEFEF')";
            onMouseout="hideddrivetip()"  href="#chitietsp3url"/>

	    </map>
    </body>
</html>